<template>
	<view class="pages">
		<view class="flex align-center flex-direction ">
			<view class="wallet-image">
				<view style="color: #fff;display: flex;flex-direction: column;margin: 43rpx 30rpx;">
					<text style="font-size: 30rpx;">学费余额（元）</text>
					<text style="font-size: 46rpx;margin-top: 35rpx;">{{ balanceInfo}}</text>
				</view>
				<!-- <view style="display: flex;justify-content: end;width:690rpx;margin-top: -20rpx;">
					<view style="display: flex;margin-left: 500rpx;">
						<button size="mini" style="border-radius: ;background: #FEF9EB;color: #FE4B88 ;" type="default" @tap="handleJump" data-url="/pages/wallet/recharge/index">充值</button>
						<button size="mini" style="border-radius: ;background: #FEF9EB;color: #FE4B88 ;margin-left: 10rpx;" type="default" @tap="handleJump" data-url="/pages/wallet/recharge/index1">提现</button>
						<button size="mini"
							style="border-radius: ;background: #FEF9EB;color: #FE4B88 ;margin-left: 10rpx;"
							type="default" @tap="handleJump" data-url="/pages/wallet/my-wallet/index3">分佣明细</button>
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view style="margin-top: 30rpx;display: flex;align-items: center;">
			<view style="width: 6rpx;height: 24rpx;background: linear-gradient( 180deg, #FF7EAA 0%, #F63879 100%);margin-right: 30rpx;">
			</view>
			<text style="color: #4D4D4D;">余额明细</text>
		</view> -->
		<view class="">
			<u-tabs :list="list1"  lineColor="#FC599B" @click="chooseTab"></u-tabs>
		</view>
		<view class="group-list">
			<template v-if="tabName == '余额明细'">
				<view class="group-item" v-for="(item,index) in list" :key="index">
					<view class="group-right">
						<view class="group-item-title">{{item.title}}</view>
						<view class="group-item-title1">{{item.create_time}}</view>
					</view>
					<view class="group-item-price">
						{{item.payable_tuition_fees}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="group-item" v-for="(item,index) in list" :key="index">
					<view class="group-right"> 
						<view class="group-item-title">{{item.remark}}</view>
						<view class="group-item-title1">{{item.create_time}}</view>
					</view>
					<view class="">
						<view style="font-size: 15px;color: #4D4D4D;margin-bottom: 20rpx;" v-if="item.is_delete == 0">未结算</view>
						<view style="font-size: 15px;color: #4D4D4D;margin-bottom: 20rpx;" v-else>已结算</view>
						<view class="group-item-price">
							{{item.change_money}}
						</view>
					</view>
				</view>
			</template>
			<u-empty v-if="list.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				width="150px" height="150px" text="列表为空" textSize="18">
			</u-empty>
			<view style="padding-bottom: 100rpx;">
				<u-loadmore v-if="loading" status="loading" />
				<u-loadmore v-if="isLastPage" status="nomore" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				user_money: '', //余额
				heightTop: 0,
				page: 1,
				limit: 10,
				list: [],
				isLastPage: false,
				loading: false,
				school_fee: 0,
				commission: 0,
				list1: [{
					name: '余额明细',
				}, {
					name: '补贴明细',
				}],
				tabName:'余额明细'
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
			balanceInfo() {
				let balancePrice = (Number(this.school_fee) + Number(this.commission)).toFixed('2')
				return balancePrice || '0.00'
			}
		},
		onUnload() {
			uni.$off('changeMoney', function(data) {});
		},
		onLoad(options) {
			let _this = this;
			//   _this.getMoney();
			console.log(this, "this")
			uni.$on('changeMoney', function(data) {
				_this.money = '';
				_this.getMoney();
			});
			this.page = 1
			this.limit = 10
			this.list = []
			if(this.tabName == '余额明细'){
				this.getFreezeLogs()
			}else{
				this.getFreezeLogs11()
			}
		},
		onShow() {
			this.getMoney();
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			if(this.tabName == '余额明细'){
				this.getFreezeLogs()
			}else{
				this.getFreezeLogs11()
			}
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				if(this.tabName == '余额明细'){
					this.getFreezeLogs()
				}else{
					this.getFreezeLogs11()
				}
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 获取
			chooseTab(e){
				console.log(e)
				this.tabName = e.name
				this.page = 1
				this.isLastPage = false
				this.list = []
				if(e.name == '余额明细'){
					this.getFreezeLogs()
				}else{
					this.getFreezeLogs11()
				}
			},
			// 佣金明细
			getFreezeLogs11(){
				this.$api.post(global.apiUrls.getFreezeLogs,{
					type:3,
					is_delete:'all'
				}).then(res => {
					console.log(res.data.data.data)
					this.list = [...this.list, ...res.data.data.data]
				})
			},
		    // 获取余额记录
			getFreezeLogs() {
				this.$api.post(global.apiUrls.getSchoolTuitionfee, {
					page: this.page,
				}).then(res => {
					let arr = []
					arr = res.data.data.data.map(item => {
						return {
							title: item.title,
							payable_tuition_fees: item.payable_tuition_fees,
							id: item.id,
							create_time: uni.$u.timeFormat(item.create_time, 'yyyy年mm月dd日')
						}
					})
					console.log(res.data.data.data)
					this.list = [...this.list, ...arr]
				}).finally(() => {
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
				});
			},
			handleJump1() {
				uni.showToast({
					title: '提现已申请'
				})
			},
			getHeight() {
				const that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#info_box')
					.boundingClientRect(data => {
						that.heightTop = data.height;
					})
					.exec();
			},
			back() {
				uni.navigateBack();
			},
			showRules() {
				this.isShow = true;
			},
			/**
			 * @description 关闭规则说明
			 */
			closePop() {
				this.isShow = false;
			},
			getMoney() {
				let _this = this;
				_this.$api
					.get(global.apiUrls.getMyMoney, {})
					.then(res => {
						if (res.data.code == 1) {
							_this.money = res.data.data.user_money;
							_this.freeze_money = res.data.data.freeze_money;
							_this.total_revenue_money = res.data.data.total_revenue_money;
							_this.total_money = (Number(_this.money) + Number(_this.freeze_money)).toFixed(2);
							_this.school_fee = res.data.data.school_fee ? res.data.data.school_fee : 0.00
							_this.freeze_money_rule = res.data.data.freeze_money_rule;
							_this.commission = res.data.data.commission ? res.data.data.commission : 0.00
						}
					})
					.catch(err => {
						console.log(err, 'get_my_money');
					});
			}
		}
	};
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.group-list {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.group-item-title1 {
		font-size: 13px;
		color: #000000;
	}

	.group-item-title {
		font-size: 15px;
		color: #000000;
		margin-bottom: 20rpx;
	}

	.group-item-price {
		font-size: 24px;
		color: #000000;
	}

	.group-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.chong-view {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
	}

	.pages {
		background: linear-gradient(#ffdae1, #ffffff);
	}

	page {
		background: #ffffff;
	}

	.btn {
		width: 320rpx;
		height: 88rpx;
		background: #B82441;
		border-radius: 16rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		color: #ffffff;
	}

	.wallet-image {
		margin-top: 69rpx;
		width: 690rpx;
		height: 260rpx;
		background-size: cover;
		background-image: url('https://localelife.chunchuangkeji.cn/h5img/images/wallte_bg.png');
	}
</style>